<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录切换</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        ul,
        ol,
        li {
            list-style: none;
        }

        .rect {
            width: 200px;
            height: 300px;
            border: 1px solid lightblue;
        }

        .rect .active {
            color: white;
            background-color: lightcoral;
        }

        .tabs ul {
            width: 100%;
            height: 50px;
            display: flex;
        }

        .tabs ul li {
            flex-grow: 1;
            text-align: center;
            line-height: 50px;
        }

        .tabs ul li+li {
            border-left: 1px solid lightblue;
        }

        .contents {
            width: 100%;
            height: 100%;
            position: relative;
        }

        .contents .content {
            width: 100%;
            height: 100%;
            position: absolute;
            background-color: lightcoral;
            display: none;
        }

        .contents .active {
            display: block;
        }
    </style>
</head>



<body>



    <div class="rect">
        <div class="tabs">
            <ul>
                <li class="tab active">登录</li>
                <li class="tab">注册</li>
            </ul>
        </div>


        <div class="contents">
            <div class="content active">登录登录登录登录登录登录</div>

            <div class="content">注册注册注册注册注册注册</div>
        </div>

    </div>




    <script>
        // // 按钮切换
        // let tabs = document.querySelectorAll(".tab")
        // tabs.forEach(function (item, index) {
        //     item.addEventListener("click", function () {
        //         if (!this.classList.contains("active")) {
        //             tabs.forEach(function (item) {
        //                 if (item.classList.contains("active")) {
        //                     item.classList.remove("active")
        //                 }
        //             })
        //             this.classList.add("active")
        //         }
        //     })
        // })
    </script>





    <script>
        // 按钮+内容
        let tabs = document.querySelectorAll(".tab")
        let contents = document.querySelectorAll(".content")
        tabs.forEach(function (item, index) {
            item.addEventListener("click", function () {
                if (!this.classList.contains("active")) {
                    tabs.forEach(function (item) {
                        if (item.classList.contains("active")) {
                            item.classList.remove("active")
                        }
                    })
                    this.classList.add("active")



                    contents.forEach(function (item3) {
                        if (item3.classList.contains("active")) {
                            item3.classList.remove("active")
                        }
                    })
                    contents[index].classList.add("active")


                }
            })
        })

    </script>



</body>

</html>